<template>
	<view>
		<navbar title="搜索商品" />
		<view class="box sticky">
			<up-search placeholder="请输入要搜索的商品" v-model="spuParams.keyword" bgColor="#EDE2CD" animation @change="change"
				@search="confirm" @custom="confirm"></up-search>
		</view>

		<view class="mall-main-items flex wrap justify-content_space-between align-item_center">
			<empty v-if="spuData.list.length === 0" />
			<view class="item" v-for="item in spuData.list" :key="item.id" @click="mallDetails(item)">
				<image class="item-cover flex align-item_center justify-content_center" :src="item.picUrl" mode="aspectFill">
				</image>
				<view class="name">{{item.name}}</view>
				<view class="points">{{fen2yuan(item.price,0)}}<text>积分</text></view>
				<view class="line-points">{{fen2yuan(item.marketPrice,0)}}积分</view>
			</view>
		</view>
		<u-gap height="110rpx"></u-gap>
	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import navbar from "@/components/navbar.vue"
	import {
		navigateTo
	} from "@/utils/tool.js"
	import {
		ref,
		reactive
	} from 'vue';
	import SpuApi from "@/sheep/api/product/spu.js"
	import {
		onReachBottom,
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';

	onReachBottom(() => {
		if (spuData.list.length >= spuData.total) return;
		spuParams.pageNo++;
		spuPage()
	})

	const mallDetails = (item) => {
		navigateTo(`/points/mall_details/index?id=${item.id}`)
	}

	const spuData = reactive({
		list: [],
		total: 0
	})
	const spuParams = reactive({
		pageNo: 1,
		pageSize: 10,
		categoryId: 86,
		keyword: ''
	})
	const spuPage = () => {
		SpuApi.getSpuPage(spuParams).then(res => {
			spuData.total = res.data.total;
			if (spuParams.pageNo === 1) spuData.list = res.data.list
			else spuData.list = spuData.list.concat(res.data.list)
		})
	}

	const change = (val) => {
		if (!val.trim()) {
			spuParams.pageNo = 1;
			spuPage()
		}
	}

	const confirm = () => {
		spuParams.pageNo = 1;
		spuPage()
	}

	onLoad(() => {
		spuPage()
	})
</script>

<style>
	page {
		background: #F8F3E9;
	}
</style>
<style scoped lang="scss">
	.mall-main-items {
		padding: 0 32rpx 0;
		box-sizing: border-box;

		.item {
			width: 324rpx;
			height: 466.69rpx;
			padding-bottom: 40rpx;

			.line-points {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(153, 153, 153, 1);
				margin-top: 6rpx;
				text-decoration: line-through;
			}

			.points {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(167, 37, 48, 1);

				text {
					font-size: 24rpx;
					color: #400303;
				}
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
				margin-top: 21rpx;
			}

			&-cover {
				width: 320rpx;
				height: 320rpx;
				border-radius: 8rpx;
				background: #EFE5D0;

				image {
					padding: 38rpx;
					box-sizing: border-box;
					width: inherit;
					height: inherit;
				}
			}
		}
	}

	.box {
		padding: 20rpx 30rpx;
		top: var(--navbarH);
		background: #F8F3E9;
	}
</style>